// 事件委托
// const div = document.querySelector('div')

// div.onclick = function (e) {
//   // console.log('点击事件')
//   // 事件绑定在了 div 身上
//   // 你点击 div 是可以触发这个事件处理函数的
//   // 你点击 p 也可以触发这个事件处理函数
//   // 我们就判断到底点击的事谁 ?
//   // 事件对象 e 内有一个属性, 叫做 target, 表示的是事件目标( 准确触发事件的那个元素 )
//   // console.log(e.target)

//   // 这个时候我们就说把 p 的事件委托给了 div
//   // if (e.target.tagName === 'P') {
//   //   console.log('执行代码逻辑')
//   // }

//   if (e.target.dataset.clickPAbc === 'handler') {
//     handler()
//   } else if (e.target.dataset.clickSpanBcd === 'handler2') {
//     handler2()
//   }

// }


// 事件委托的优点:
// 1. 多个元素的事件变成一个元素的事件
// 2. 对于内部元素的动态操作( 删除和添加 )友好

// 需求: 给每一个 li 添加一个点击事件, 点击的时候展示自己内部的文本
// 方案1: 循环绑定事件
// const lis = document.querySelectorAll('ul > li')
// const btn = document.querySelector('button')
// const ul = document.querySelector('ul')
// for (let i = 0; i < lis.length; i++) {
//   lis[i].onclick = handler
// }
// function handler() {
//   console.log(this.innerText)
// }
// 动态追加的时候
// btn.onclick = function () {
  // 追加方案1: 所有的 li 都没有事件了
  // ul.innerHTML = `
  //   <li>1</li>
  //   <li>2</li>
  //   <li>3</li>
  //   <li>4</li>
  // `
  // 追加方案2: 新追加的没有事件, 不影响以前的
  // const newLi = document.createElement('li')
  // newLi.innerHTML = '4'
  // ul.appendChild(newLi)
// }

// 实现方案2:
// const ul = document.querySelector('ul')
// const btn = document.querySelector('button')
// ul.onclick = function (e) {
//   if (e.target.tagName === 'LI') {
//     console.log(e.target.innerText)
//   }
// }
// 动态追加的时候
// btn.onclick = function () {
  // 追加方案1: 所有的 li 都没有事件了
  // ul.innerHTML = `
  //   <li>1</li>
  //   <li>2</li>
  //   <li>3</li>
  //   <li>4</li>
  // `
  // 追加方案2: 新追加的没有事件, 不影响以前的
//   const newLi = document.createElement('li')
//   newLi.innerHTML = '4'
//   ul.appendChild(newLi)
// }
